---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/pages/category/[cat].astro
 * Desc   : Per-category gallery page
 * ============================================================
 */
import Base from '../../layouts/Base.astro';
import SnippetCard from '../../components/SnippetCard.astro';
import { loadSnippets, loadCategories } from '../../lib/snippets.mjs';

export async function getStaticPaths() {
  const categories = await loadCategories();
  return categories.map((c) => ({ params: { cat: c.name } }));
}

const { cat } = Astro.params;
const snippets = (await loadSnippets()).filter((s) => s.category === cat);
const categories = await loadCategories();
---

<Base
  title={`${cat} — SVGarden`}
  description={`${snippets.length} self-contained ${cat} SVG + CSS animation snippets — preview, customize, copy.`}
>
  <section class="sg-hero">
    <p class="sg-breadcrumb"><a href="/">Gallery</a> / {cat}</p>
    <h1>{cat}</h1>
    <p>{snippets.length} snippet{snippets.length === 1 ? '' : 's'} in this category.</p>
  </section>

  <div class="sg-toolbar">
    <div class="sg-chips" aria-label="Categories">
      <a class="sg-chip" href="/">All</a>
      {
        categories.map((c) => (
          <a class={`sg-chip${c.name === cat ? ' sg-chip-active' : ''}`} href={`/category/${c.name}`}>
            {c.name} · {c.count}
          </a>
        ))
      }
    </div>
  </div>

  <div class="sg-grid">
    {snippets.map((s) => <SnippetCard snippet={s} />)}
  </div>
</Base>